<!-- 错题重练 -->
<template>
  <div class="examManage-page">
    <div class="examManage-box">
      <div class="examManage-box-l">
        <div class="examManage-box-c-car">
          <div class="answerSheet-box">
            <div class="answerSheet-box-name" style="display: flex; justify-content: space-between">
              <span>答题卡</span>
              <img src="@/assets/icon/back-icon.png" alt="" title="返回" @click="goBack">
            </div>
            <div class="answerSheet-on">
              <div class="answerSheet-box-cont">
                <div class="theory-box-l-title">错题重练</div>
                <div class="answerSheet-box-cont-o">
                  <div class="answerSheet-box-cont-o-item" :class="item.answer_state == 1 ? 'sure' : 'worn'" @click="positionLocation(item)" v-for="(item, index) in list">
                    <div style="margin-top: 2px">{{ index + 1 }}</div>
                    <div>单</div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="examManage-box-c">
        <div class="examManage-box-c-car" id="chatScrollBox">
          <div class="examPractice-box" v-for="(item, index) in list">
            <div class="examPractice-box-t">
              <span class="box-t-title">{{index+1}}、【{{item.question.type_name}}】{{ item.question.title }}</span>
              <img src="@/assets/icon/star.png" alt="" v-if="item.is_fav == 0" @click="clickToBookmark(item)">
              <img src="@/assets/icon/star-active.png" alt="" v-if="item.is_fav == 1" @click="clickToBookmark(item)">
            </div>
            <div class="examPractice-box-c">
              <div class="box-c-exam">
                <div class="box-c-exam-item" v-for="(qitem, qindex) in item.question.option"  @click="slectAn(index, qindex)">
                  <div class="check-up" :class="{ checkActive: isSelect(item, item.answer, getIndex(qindex))}">
                    <div class="check-active-in"></div>
                  </div>
                  <div :class="{ active: isSelect(item, item.answer, getIndex(qindex))}">
                    <span class="">{{ getIndex(qindex) }}、</span>
                    <span>{{ qitem.content }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="examPractice-box-b">
              <div class="box-b-btn" @click="handelClick(item)">解 析</div>
              <div class="box-b-content" v-if="item.question.analysisShow">
                <div class="box-b-content-t">正确答案：{{ item.question.answer}}</div>
                <div class="box-b-content-b"><div style="display: inline-block">解析︰</div><div style="display: inline-block" v-html="item.question.analysis"></div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ExamPractice from '@/components/ExamPractice'
import {
  getSimulateDetail,
  getStartAnswer,
  getSubmitAnswer,
  getSubmitTheTestPaper,
  favoriteTopic,
  getWrongQuestion
} from "@/api";
import watermark from "@/utils/watermark";
export default {
  name: "examManage",
  components: { ExamPractice },
  data(){
    return {
      title: '', // 考试标题
      dialogVisible: false,
      Qsindex: 0,
      paperId: '', // 考试ID
      list: [], // 考试题目
      recordId: '', //
      answerList: [],
      examInfo: {},
      duration: null,
      userInfo: {}, // 用户信息
    }
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.paperId = this.$route.query.paper_id
    this.recordId = this.$route.query.record_id
    if (this.paperId) {
      this.getDetail()
    }
    watermark.set('')
  },
  methods: {
    handelClick(item) {
      item.question.analysisShow = !item.question.analysisShow
    },
    // 考试时间到
    finishHandel() {
      this.$confirm("考试时间到！点击提交试卷可查看考试成绩/取消则会退出本次考试！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.submitClick()
      }).catch(() => {
        this.$router.push({ path: '/simulatedExam' })
      });
    },
    // 位置定位
    positionLocation(item) {
      // 获取id
      let id = item.question_id
      const index = this.list.findIndex(item => item.question_id == id)
      const childs = document.querySelectorAll(".examPractice-box");
      const scrollHeight = childs[index].offsetTop
      let div = document.getElementById("chatScrollBox");
      div.scrollTop = scrollHeight - 100
    },
    // 获取我的错题
    getDetail() {
      let params = {
        page: 1,
        list_rows: 9999,
        paper_id: this.paperId
      }
      getWrongQuestion(params).then(res => {
        if (res.code == 1) {
          this.list = res.data.detail.data.map((item)=> {
            item.question.analysisShow = false
            return {
              ...item,
              answer_state: 2, // answer_state答题状态0未答题1回答正确2回答错误
            }
          })
        }
      })
    },
    // 点击每题答案提交
    subAnser() {
      let itemInfo = this.list[this.Qsindex]
      let answer = this.list[this.Qsindex].answer; // 选择的答案
      if (!answer) {
        return
      }
      if(this.areArraysEqual(answer, itemInfo.question.answer)) {
        this.list[this.Qsindex].answer_state = 1
      } else {
        this.list[this.Qsindex].answer_state = 2
      }
    },
    // 判断多选
    areArraysEqual(arr1, arr2) {
      // 将数组转换为集合
      const set1 = new Set(arr1);
      const set2 = new Set(arr2);
      // 比较两个集合的大小和元素
      if (set1.size !== set2.size) {
        return false;
      }
      for (let item of set1) {
        if (!set2.has(item)) {
          return false;
        }
      }

      return true;
    },
    // 返回
    goBack() {
      this.$router.push({
        path: '/examDetails',
        query: {
          paper_id: this.paperId,
          record_id: this.recordId
        }
      })
    },
    // 选项字母
    getIndex(n) {
      return String.fromCharCode(n + 65)
    },

    isSelect(e, answer, answer2) {
      if (e.question.question_type == 2) {
        return answer.indexOf(answer2) != -1
      } else {
        return answer === answer2
      }
    },
    slectAn(index, n) {
      this.Qsindex = index
      let item = this.list[index];
      if (item.question.question_type != 2) {
        item.answer = this.getIndex(n);
        this.subAnser();
      } else {
        let arr = item.answer || [];
        let currentOptions = this.getIndex(n);
        if (typeof arr == 'string') {
          arr = item.answer.split(',');
        }
        let arrIndex = arr.indexOf(currentOptions);
        if (arrIndex > -1) {
          arr.splice(arrIndex, 1)
        } else {
          arr.push(this.getIndex(n))
        }
        item.answer = arr.join(",")
        this.subAnser();
      }
    },
    // 收藏题目
    handleFavoriteTopic(e) {
      let params = {
        paper_id: e.paper_id,
        question_id: e.question_id,
        paper_question_id: e.paper_question_id,
      }
      favoriteTopic(params).then(res => {
        if (res.code == 1) {
          this.$message.success('收藏成功')
        }
      })
    },
    // 确认交卷
    submitClick() {
      let params = {record_id: this.recordId}
      getSubmitTheTestPaper(params).then(res => {
        this.dialogVisible = false
        this.$router.push({
          path: '/examDetails',
          query: {
            paper_id: this.paperId
          }
        })
      })
    },

    // 点击是否收藏
    clickToBookmark(item) {
      let params = {
        paper_id: this.paperId,
        question_id: item.question_id,
        paper_question_id: item.paper_question_id,
      }
      favoriteTopic(params).then(res => {
        if (res.code == 1) {
          item.is_fav = !item.is_fav
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.examManage-page {
  width: 100%;
  height: 100vh;
  user-select: none;
  background: #F5F5F5;
  .examManage-title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
    background: #0158FD;
  }
  .examManage-box {
    width: 97%;
    height: calc(100vh - 90px);
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    .examManage-box-l {
      width: 22%;
      height: 98%;
      background: #FFFFFF;
      border-radius: 4px;
    }
    .examManage-box-c {
      width: 77%;
      height: 98%;
      background: #FFFFFF;
      border-radius: 4px;
    }
  }

  .active {
    color: #3582E5;
  }
  .check-up {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #9F9F9F;
    margin-right: 10px;
  }
  .checkActive {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #9F9F9F;
    margin-right: 10px;
    .check-active-in {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin: 2px auto;
      background: #3582E5;
      border: 1px solid #3582E5;
    }
  }
}
</style>
